<script>
import MAIN_STORE from '@/store/store.js'
export default {
  /**
   * 工具方法
   * 放大 缩小 初始化 旋转
  */
  name: "funciton-controller",
  components: {},
  data() {
    return {
      // 是否正在测量
      isMeasuring: false,
      // length area height
      measuringType: '',
      rotate: 0,
    }
  },
  computed: {
    compassStyle() {
      return {
        transform: 'rotate(' + this.rotate + 'deg)'
      }
    }
  },
  watch: {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  methods: {
    homeClick() {
      this.$store.commit('LOCATION_ORIGIN_VIEW');
    },
    zoomOut() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      if (!mapIns) { return }
      const min = mapIns.getView().getMinZoom();
      const currentZoom = mapIns.getView().getZoom();
      const n = currentZoom - 1 < min ? min : currentZoom - 1;
      mapIns.getView().animate({
        zoom: n,
        duration: 300,
      });
    },
    zoomIn() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      if (!mapIns) { return }
      const max = mapIns.getView().getMaxZoom();
      const currentZoom = mapIns.getView().getZoom();
      const n = currentZoom + 1 > max ? max : currentZoom + 1;
      mapIns.getView().animate({
        zoom: n,
        duration: 300,
      });
    },
    leftClick() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      let view = mapIns.getView();
      let center = view.getCenter();
      let rotation = view.getRotation();
      rotation = rotation - Math.PI / 2;
      this.rotate -= 90;
      view.animate({
        center,
        rotation
      })
    },
    rightClick() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      let view = mapIns.getView();
      let center = view.getCenter();
      let rotation = view.getRotation();
      rotation = rotation + Math.PI / 2;
      this.rotate += 90;
      view.animate({
        center,
        rotation
      })
    },
    centerClick() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      let view = mapIns.getView();
      let center = view.getCenter();
      this.rotate = 0;
      view.animate({
        center,
        rotation: 0
      })
    }
  },
};
</script>

<template>
  <div class="all-function-controller" :class="[
    ['Search', 'Decision'].indexOf($route.name) !== -1 ? 'show' : ''
  ]">
    <!-- 指北针 -->
    <div class="compass-wrapper">
      <!-- 逆时针 -->
      <div class="nishizhen hover-pointer" @click="leftClick"></div>
      <!-- 时针 -->
      <div class="compass-inner hover-pointer" @click="centerClick" :style="compassStyle"></div>
      <!-- 顺时针 -->
      <div class="shunshizhen hover-pointer" @click="rightClick"></div>
    </div>
    <!-- 外部 -->
    <div class="measure-out">
      <div class="item zoom-out hover" @click="zoomOut()"></div>
      <div class="item zoom-in hover" @click="zoomIn()"></div>
      <div class="item home hover" @click="homeClick()"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.all-function-controller {
  position: fixed;
  bottom: 10rem;
  right: 1.5rem;
  pointer-events: all;
  transform: scale(.5);
  transform-origin: right bottom;
  display: none;

  &.show {
    display: initial;
  }

  &>.compass-wrapper {
    margin-bottom: 2rem;
    width: 10rem;
    height: 10rem;
    transform: scale(1);
    background: url("@/components/images/earth-navi-control-pc4-2x.png") 0% 0% / 50rem no-repeat;

    &>.nishizhen {
      position: absolute;
      left: 0.2rem;
      width: 2.8rem;
      height: 100%;
      background: url("@/components/images/earth-navi-control-pc4-2x.png") -13.9rem 0 / 50rem no-repeat;
      z-index: 2;

      &:hover {
        background: url("@/components/images/earth-navi-control-pc4-2x.png") -16.5rem 0 / 50rem no-repeat;
      }
    }

    &>.compass-inner {
      position: absolute;
      left: 3.4rem;
      width: 2.8rem;
      height: 100%;
      background: url("@/components/images/earth-navi-control-pc4-2x.png") -10.4rem 0 / 50rem no-repeat;
      z-index: 1;
      transition: all 1s;
    }

    &>.shunshizhen {
      position: absolute;
      left: 7.2rem;
      width: 2.8rem;
      height: 100%;
      background: url("@/components/images/earth-navi-control-pc4-2x.png") -13.5rem 0 / 50rem no-repeat;
      z-index: 2;
      transform: scaleX(-1);

      &:hover {
        background: url("@/components/images/earth-navi-control-pc4-2x.png") -16.1rem 0 / 50rem no-repeat;
      }
    }
  }

  &>.measure-out {
    &>.item {
      width: 10rem;
      height: 10rem;
      margin-bottom: 1rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      transition: all .7s;

      &.zoom-out {
        background-image: url('@/components/images/measure/icon-zoomout.png');
      }

      &.zoom-in {
        background-image: url('@/components/images/measure/icon-zoomin.png');
      }

      &.home {
        background-image: url('@/components/images/measure/icon-home.png');
      }

      &.hover:hover {

        &.zoom-out {
          background-image: url('@/components/images/measure/icon-zoomout-active.png');
        }

        &.zoom-in {
          background-image: url('@/components/images/measure/icon-zoomin-active.png');
        }

        &.home {
          background-image: url('@/components/images/measure/icon-home-active.png');
        }
      }
    }
  }
}
</style>